<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线聊天室</title>
</head>
<body>

    <input type="text" id="input_Message" />
    <input type="button" value="发送消息" onclick="sendMsg()"/>
    <br/>
    <p id="show_message" style="background-color: cyan">接收到的消息：</p>

   <script>

       var webSocket = null;
       if(window.WebSocket){
           webSocket = new WebSocket("ws://127.0.0.1:8081/ws");
           webSocket.onpen = function (){
               console.log("建立连接...");
           }
           webSocket.onclose = function (){
               console.log("断开连接...");
           }

           webSocket.onmessage = function (e){

               console.log("接收到消息："+e.data);
               document.getElementById("show_message").innerHTML += e.data +"<br/>";
           }

       }else{
           console.log("当前浏览器暂不支持websocket");
       }


       function sendMsg(){
            var obj = document.getElementById("input_Message");
           webSocket.send(obj.value);
       }
   </script>

</body>
</html>